import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'

export default class NotFound extends Component {
  constructor() {
    super();
    this.state = {

    }
  }
  jump(url) {
    // go goBack replace...
    this.props.history.push(url)
  }
  render() {
    return (
      <div>
        <p>您输入的地址有误，请核对后重试！</p>
        {/* 路由组件跳转-声明式导航 */}
        {/* Link和NavLink的区别 NavLink组件才有activeClassName */}
        <NavLink exact activeClassName="aa-active" to="/">首页</NavLink><br></br>
        <NavLink exact activeClassName="aa-active" to="/afn">a页</NavLink><br></br>
        <NavLink exact activeClassName="aa-active" to="/bclass">b页</NavLink><br></br>
        <NavLink exact activeClassName="aa-active" to="/big">big页</NavLink><br></br>
        <hr></hr>
        {/* 通过js跳转 编程式导航 */}
        <button onClick={() => this.jump('/')}>首页</button>
        <button onClick={() => this.jump('/afn')}>a页</button>
        <button onClick={() => this.jump('/bclass')}>b页</button>
        <button onClick={() => this.jump('/big')}>big页</button>
      </div>
    )
  }
}
